<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script
    src="https://code.jquery.com/jquery-3.6.1.js"
    integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
    crossorigin="anonymous"></script>
    
    <title>Document</title>
    <style>
        .jian{
            text-decoration: none;
        }
        .jia{
            text-decoration: none;
        }
        .itext{
            text-align: center;
        }
    </style>
    <script>
        $(function(){
            $(".jia").click(function(){
                // 得到当前兄弟文本框的值
                var n = $(this).siblings(".itext").val()
                n++
                $(this).siblings(".itext").val(n)
                // 3，计算小计算模块  根据文本框的值   乘以  当前商品的价格  就是商品的小计
                // 当前商品的价格 p
               var p =  $(this).parent().parent().siblings(".p-price").html();
            p=p.substr(1)
            console.log(p)
            //小计模块
            $(this).parent().parent().siblings(".p-sum").html("￥"+ (p *n).toFixed(2))
            getSum()
            })



            $(".jian").click(function(){
                //得到当前文本框的值
                var n = $(this).siblings(".itext").val()
                if(n==1){
                    return false
                }
                n--
                $(this).siblings(".itext").val(n)
                 // 3，计算小计算模块  根据文本框的值   乘以  当前商品的价格  就是商品的小计
                // 当前商品的价格 p
               var p =  $(this).parent().siblings(".p-price").html();
                p=p.substr(1)
                console.log(p)
                //小计模块   .toFixed(2) 可以保留两位小数
                $(this).parent().siblings(".p-sum").html("￥"+ (p *n).toFixed(2))
                getSum()

            })



            // 4,用户修改文本的值  计算  小计模块
            $(".itext").change(function(){
                // 先得到文本框的里面的值  乘以  当前商品的单价
                var n =$(this).val()
            //当前商品的单价
            var p = $(this).parents(".p-num").siblings(".p-price").html();
            p=p.substr(1);
            $(this).parents(".p-num").siblings(".p-sum").html("￥"+(p*n).toFixed(2))
            getSum()
                   });
                   getSum()
                //    5.计算总计和总额模块
                function getSum(){
                    var count = 0;//计算总件数
                    var money = 0;//计算总计数
                    $(".itext").each(function(i,ele){
                        count += parseInt($(ele).val()) 
                    })
                    $(".amout em").text(count)
                    $(".p-sum").each.each(function(i,ele){
                        money += parseFloat($(ele).text().substr(1))
                    })
                    $(".price-sum em").text("￥"+money.toFixed(2))
                }
        })
    </script>
</head>
<body>
    <div class="p-price">￥12.60</div>
    <div class="p-num">
    <div class="quantity-form">
        <a href="#" class="jian">-</a>
        <input type="text"class=itext value="1">
        <a href="#" class="jia">+</a>
    </div>
</div>
    <div class="p-sum">￥12.6</div>
    <div class="toolbar-right">
        <div class="amout">已经选<em>1</em>件商品</div>
        <div class="price-sum">总价：<em>￥12.60</em></div>
        <div class="btn-area">去结算</div>
    </div>
</body>
</html>